<template>
  <div class="edit-form">
    <header>
      <div class="title">
        {{ oprType && oprType === OPR_TYPE.ADD ? "新增" : "编辑" }}等级
      </div>
      <el-button-group>
        <el-button
          size="small"
          round
          @click="goBack"
        >返回
        </el-button>
        <el-button
          type="primary"
          size="small"
          round
          @click="handleSubmit"
        >保存
        </el-button>
      </el-button-group>
    </header>
    <div class="main">
      <el-form
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-form-item label="门店:" prop="shopId">
          <el-select v-model="formData.shopId" placeholder="请选择" size="small">
            <el-option
              v-for="item in shopList"
              :key="item.shopId"
              :label="item.name"
              :value="item.shopId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="等级名称:" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入等级名称,如高级"
            maxlength="15"
            clearable
            size="small"
          />
        </el-form-item>

        <el-form-item label="等级价:" prop="price">
          <el-input-number
            v-model="formData.price"
            controls-position="right"
            :min="0.01"
            :max="9999999.99"
            placeholder="请输入等级价"
            size="small"
          >
            <template slot="append">元</template>
          </el-input-number>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  OPR_TYPE,
  LIST_STATE
} from '@/views/wxaReservationModule/views/resourceManage/config'
import {
  addAppointmentLevelDetail,
  getAppointmentLevelDetail,
  updateAppointmentLevelDetail
} from '@/api/reservation'

export default {
  name: 'Index',
  props: {
    oprType: {
      type: String,
      default: OPR_TYPE.ADD
    },
    shopId: {
      type: Number,
      default: 0
    },
    detailId: {
      type: Number,
      default: 0
    },
    shopList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      OPR_TYPE,
      LIST_STATE,
      formData: {
        shopId: ''
      },
      rules: {
        shopId: [{ required: true, message: '请选择门店', trigger: 'blur' }],
        name: [{ required: true, message: '请输入等级名称', trigger: 'blur' }],
        price: [{ required: true, message: '范围0.01~9999999.99', trigger: 'blur' }]
      },
      levelList: []
    }
  },
  watch: {
    oprType() {
      this.getDetail()
    }
  },
  mounted() {
    this.getDetail()
    this.formData.shopId = this.shopId
  },
  methods: {
    goBack() {
      this.$emit('on-list-go-back')
    },
    async getDetail() {
      if (this.oprType === OPR_TYPE.ADD) {
        this.formData = {
          name: '',
          shopId: '',
          price: ''
        }
      } else {
        // 通过接口获取详情
        const { code, data } = await getAppointmentLevelDetail({
          id: this.detailId
        })
        console.log(this.detailId, code, data, '通过接口获取详情')
        if (code === 0) {
          this.formData = data
        }
      }
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(async(validate) => {
        if (validate) {
          this.formData.id = this.formData.levelId
          const api =
            this.oprType === OPR_TYPE.ADD
              ? addAppointmentLevelDetail
              : updateAppointmentLevelDetail
          const { code } = await api(this.formData)
          if (code === 0) {
            this.$message.success('保存成功')
            this.goBack()
          }
        } else {
          this.$message.error('请输入完整信息')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #9e9e9e;
  padding-bottom: 20px;
  .title {
    font-size: 20px;
    font-weight: bold;
    margin-right: 20px;
  }
  div {
    margin-right: 20px;
  }
}
.main {
  margin-top: 20px;
  .el-select,
  .el-input {
    width: 300px;
  }
  .app-uploader-img-plus {
    width: 180px;
    height: 180px;
    .app-uploader-img-plus-icon {
      font-size: 36px;
      color: #8c939d;
      width: 180px;
      height: 180px;
      line-height: 180px;
      text-align: center;
    }
    .avatar {
      width: 180px;
      height: 180px;
      display: block;
    }
  }
  .upload_tips {
    margin: 20px 0 0 20px;
    li {
      margin-top: 10px;
      font-size: 14px;
      line-height: 16px;
      color: $dark-font-color;
    }
  }
}
</style>
